<!-- 字典表 -->
<template>
  <div class="table">
    <el-row :gutter="10">
      <el-col :lg="12">
        <!-- 字典类型列表 -->
        <SearchTableType v-model:formStatus="formStatus" ref="searchTableRef" @handleRowClick="handleRowClick" @handleViewEdit="handleViewEdit" />
      </el-col>
      <el-col :lg="12">
        <!-- 字典数据列表 -->
        <SearchTableLabel v-model:formStatus="formStatusLabel" :dictKey="dictKey" ref="searchTableLabelRef" @handleViewEdit="handleViewEditLabel" />
      </el-col>
    </el-row>
    <!-- 新增编辑查看弹出框(字典类型) -->
    <FormDialogType v-model:formStatus="formStatus" v-model:form="dictTypeForm" @handleSuccess="handleSuccess" />
    <!-- 新增编辑查看弹出框(字典数据) -->
    <FormDialogLabel v-model:formStatus="formStatusLabel" v-model:form="dictLabelForm" @handleSuccess="handleSuccessLabel" />
  </div>
</template>

<script setup lang="ts" name="dict">
import SearchTableType from "@/components/configInfo/dictView/dictType/SearchTable.vue";
import SearchTableLabel from "@/components/configInfo/dictView/dictLabel/SearchTable.vue";
import FormDialogType from "@/components/configInfo/dictView/dictType/FormDialog.vue";
import FormDialogLabel from "@/components/configInfo/dictView/dictLabel/FormDialog.vue";

import type { ViewMode, ViewModeFilter } from "@/types/common";
import type { IDictData, IDictType } from "@/types/dict";
/* 表格子组件的引用 */
const searchTableRef = ref<InstanceType<typeof SearchTableType>>();
const searchTableLabelRef = ref<InstanceType<typeof SearchTableLabel>>();
const formStatus = ref<ViewMode>("none");
const formStatusLabel = ref<ViewMode>("none");
const dictKey = ref<string>("");
const dictTypeForm = reactive<IDictType>({
  id: 0,
  dictKey: "",
  dictValue: ""
});
const dictLabelForm = reactive<IDictData>({
  id: 0,
  dictKey: "",
  dictValue: "",
  dictLabel: "",
  dictSort: 0
});
/* 点击编辑按钮 */
function handleRowClick(row: IDictType) {
  // if (row.dictKey !== this.dictDataForm.dictKey) {
  //   this.searchCondition1.dictKey = row.dictKey;
  //   this.dictDataForm.dictKey = row.dictKey;
  //   this.disabledbtn1 = false;
  //   /* 初始化数据字典详情 */
  //   this.getDictDataInfo();
  //   /* 通知另一个组件初始化数据 */
  // }
  if (row.dictKey !== dictLabelForm.dictKey) {
    dictLabelForm.dictKey = row.dictKey;
    dictKey.value = row.dictKey;
  }
}
/* 点击编辑按钮(字典类型) */
function handleViewEdit(row: IDictType, code: ViewModeFilter) {
  formStatus.value = code;
  nextTick(() => {
    dictTypeForm.id = row.id;
    dictTypeForm.dictKey = row.dictKey;
    dictTypeForm.dictValue = row.dictValue;
  });
}
/* 成功保存或者编辑的回调(字典类型) */
function handleSuccess() {
  searchTableRef.value?.getTableInfo();
}

/* 点击编辑按钮(字典数据) */
function handleViewEditLabel(row: IDictData, code: ViewModeFilter) {
  formStatusLabel.value = code;
  nextTick(() => {
    dictLabelForm.id = row.id;
    dictLabelForm.dictKey = row.dictKey;
    dictLabelForm.dictValue = row.dictValue;
    dictLabelForm.dictLabel = row.dictLabel;
    dictLabelForm.dictSort = row.dictSort;
  });
}
/* 成功保存或者编辑的回调(字典数据) */
function handleSuccessLabel() {
  searchTableLabelRef.value?.getTableInfo();
}
</script>

<style scoped>
/* layout-布局 */

.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}

.textAlignCenter {
  text-align: center;
}

/* 修改select的盒模型 */
.el-select {
  display: block;
}

/* 确定按钮的显示与隐藏 */
.displaybtn {
  display: none;
}

/* 修改该字典值  查询条件，查询结果得样式 */
.el-breadcrumb {
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

/* 提示图标设置 */
.icon-wzg-config {
  height: 30px;
  line-height: 30px;
}

/* 修改Switch开关 */
.el-switch {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
